# ESLint

To ensure correct usage of `next-intl`, you can use ESLint to enforce certain rules.

## Avoid hardcoded labels in component markup

The [`react/jsx-no-literals`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-literals.md) rule from [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react) can be helpful with spotting hardcoded labels in component markup. This can be especially helpful when migrating a project to `next-intl`, if you want to make sure that all labels have been extracted.

```javascript filename="eslint.config.js"
// ...

  rules: {
    // Avoid hardcoded labels
    'react/jsx-no-literals': 'error'
  }
```

Be careful though that this doesn't catch hardcoded attributes (e.g. `aria-label="Open menu"`).

## Consistent usage of navigation APIs

If you are using [i18n routing](/docs/getting-started/app-router), you might want to ensure that developers consistently use the [navigation APIs](/docs/routing/navigation) that you've configured in your project.

In this example, developers will be prompted to import from `@/navigation` when they try to import navigation APIs from Next.js.

```javascript filename="eslint.config.js"
// ...

  rules: {
    // Consistently import navigation APIs from `@/navigation`
    'no-restricted-imports': [
      'error',
      {
        name: 'next/link',
        message: 'Please import from `@/navigation` instead.'
      },
      {
        name: 'next/navigation',
        importNames: ['redirect', 'permanentRedirect', 'useRouter', 'usePathname'],
        message: 'Please import from `@/navigation` instead.'
      }
    ]
  }
```
